<!--直播列表子项组件-->
// 更新 LiveCourseItem.vue 文件
<template>
  <view class="entire">
    <view class="picture" style="margin-top: 8rpx; margin-left: 8rpx">
      <image :src="imageSrc" @error="handleImageError" class="picture" />
      <view class="picture-number">
        {{ course.reserveCount > 0 ? course.reserveCount + '人预约' : '' }}
      </view>
    </view>
    <view class="info">
      <text class="title">{{ course.liveName }}</text>
      <text class="time-value" v-if="true">直播时间: {{ course.startTimeStr }}</text>
      <text class="time-value" v-else>倒计时: {{ course.countdown }}</text>
      <view class="bottom-button">
        <view class="status-tag">
          {{ course.statusStr }}
        </view>
        <!-- 未预约状态 -->
        <view v-if="course.myUserTypeToThislive == 2">
          <!-- 可点击的预约按钮（runStatus 为 0、1 或 4 时） -->
          <view
            v-if="[0, 1, 4].includes(course.runStatus)"
            class="button-control"
            @click="navToLiveReservation()"
          >
            <image
              src="/static/images/icons/live/icon_time.png"
              style="width: 24rpx; height: 24rpx; margin-right: 10rpx"
            />
            立即预约
          </view>

          <!-- 不可点击的预约状态（其他 runStatus） -->
          <view v-else class="button-control" style="background-color: rgba(229, 239, 253, 0.67)">
            <image
              src="/static/images/icons/live/icon_time.png"
              style="width: 24rpx; height: 24rpx; margin-right: 10rpx"
            />
            立即预约
          </view>
        </view>

        <!-- 已预约或已开放 -->
        <view v-if="course.myUserTypeToThislive == 1 || course.myUserTypeToThislive == 3">
          <!-- 未开始或者即将开始 -->
          <view
            v-if="course.runStatus == 0 || course.runStatus == 4"
            class="button-control"
            @click="navToLiveReservation()"
          >
            <image
              src="/static/images/icons/live/icon_doc.png"
              style="width: 24rpx; height: 24rpx; margin-right: 10rpx"
            />
            查看详情
          </view>

          <!-- 进行中 -->
          <view v-else-if="course.runStatus == 1" class="button-control" @click="navToLive">
            <image
              src="/static/images/icons/live/icon_onLive.png"
              style="width: 24rpx; height: 24rpx; margin-right: 10rpx"
            />
            进入直播间
          </view>

          <!-- 已结束并且小于180天 -->
          <view v-else class="button-control" @click="liveOverTips">
            <image
              src="/static/images/icons/live/icon_onLive.png"
              style="width: 24rpx; height: 24rpx; margin-right: 10rpx"
            />
            进入直播间
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { LiveItem, submitWatchLive } from '@/service/live/live'
import { ref } from 'vue'

const props = defineProps<{
  course: LiveItem
}>()

const defaultImage = '/static/images/icons/default.jpg'
const imageSrc = ref(props.course.frontImage || defaultImage)

// 处理图片加载错误
const handleImageError = () => {
  imageSrc.value = defaultImage
}

const navToLiveReservation = () => {
  uni.navigateTo({
    url: '/pages-sub/liveCourse/liveReservation?liveId=' + props.course.liveId,
  })
}
const navToLive = () => {
  uni.navigateTo({
    url: '/pages-sub/webview/webviewLive?channelId=' + props.course.chanelId,
  })
  // 提交观看直播的请求
  submitWatchLive(props.course.liveId, props.course.chanelId)
}
const liveOverTips = () => {
  uni.showToast({
    title: '直播已结束，无法进入直播间',
    icon: 'none',
    duration: 2000,
  })
}
</script>

<style scoped lang="scss">
.entire {
  display: flex;
  width: 700rpx;
  height: 180rpx;
  margin-top: 30rpx;
  margin-left: 25rpx;
  background-color: white;
  border-radius: 15rpx;
  .picture {
    margin-left: 10rpx;
    margin-right: 10rpx;
    width: 240rpx;
    height: 164rpx;
    position: relative;
    border-radius: 8rpx;
    .picture-number {
      position: absolute;
      background-color: rgba(58, 58, 58, 0.42);
      left: 0;
      top: 0;
      z-index: 10;
      color: white;
      padding: 1px;
      font-size: small;
    }
  }
  .info {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 440rpx;
    height: 180rpx;
    letter-spacing: 2rpx;
    padding: 15rpx 20rpx;
    .title {
      width: 100%;
      height: 40rpx;
      overflow: hidden;
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 7rpx;
    }
    .time-value {
      font-size: 24rpx;
      color: #666;
      margin-top: 10rpx;
    }
    .bottom-button {
      align-items: center;
      margin-top: 15rpx;
      display: flex;
      .status-tag {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100rpx;
        height: 40rpx;
        font-size: 22rpx;
        color: #787777;
        border-radius: 20rpx;
        background-color: rgba(229, 239, 253, 0.67);
      }
      .button-control {
        margin-left: 50rpx;
        display: flex;
        height: 45rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        font-size: 23rpx;
        justify-content: center;
        align-items: center;
        background-color: $uni-color-primary;
        border-radius: 25rpx;
        color: white;
      }
    }
  }
}
</style>
